<template>
  <div class="box-shadow">
    <!-- 搜索 -->
    <div class="search-area border-bottom">
      <div class="from froms">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item
            :label="$t('系统模块') + ':'"
            prop="title"
            label-width="80px"
          >
            <el-input
              v-model="queryParams.title"
              :placeholder="$t('请输入系统模块')"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            :label="$t('操作人员') + ':'"
            prop="operName"
            label-width="73px"
          >
            <el-input
              v-model="queryParams.operName"
              :placeholder="$t('请输入操作人员')"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('类型') + ':'" prop="businessType">
            <el-select
              v-model="queryParams.businessType"
              :placeholder="$t('操作类型')"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_oper_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('状态') + ':'" prop="status">
            <el-select
              v-model="queryParams.status"
              :placeholder="$t('操作状态')"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.sys_common_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item> </el-form-item>
          <el-form-item :label="$t('操作时间') + ':'" label-width="80px">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="search-area-btn btns styadd">
        <div @click="handleQuery" class="serch-btn cuver-point">
          {{ $t("搜索") }}
        </div>
        <div @click="resetQuery" class="reset-btn cuver-point">
          {{ $t("重置") }}
        </div>
      </div>
    </div>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['monitor:operlog:remove']"
        >删除</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleClean"
          v-hasPermi="['monitor:operlog:remove']"
          >清空</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <div>
          <div
            @click="handleExport"
            v-hasPermi="['monitor:operlog:export']"
            class="serch-btn cursor-pointer table-top"
          >
            导出
          </div>
          <div class="tooltips">
            <span>提示：由于操作日志数据过多，系统自动清理3个月之前的数据</span>
          </div>
        </div>
      </el-col> -->
    </el-row>
    <!-- 表格 -->
    <div class="ptneig">
      <div class="search-area-btn btns">
        <div
          class="serch-btn cuver-point table-top padelent"
          @click="handleExport"
          v-hasPermi="['monitor:operlog:export']"
        >
          {{ $t("导出") }}
        </div>
      </div>
      <div class="tooltips">
        <span>{{
          $t("提示由于操作日志数据过多系统自动清理3个月之前的数据")
        }}</span>
      </div>
      <el-table
        ref="tables"
        v-loading="loading"
        :data="list"
        @selection-change="handleSelectionChange"
        :default-sort="defaultSort"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="$t('日志编号')" align="center" prop="operId" />
        <el-table-column :label="$t('系统模块')" align="center" prop="title" />
        <el-table-column
          :label="$t('操作类型')"
          align="center"
          prop="businessType"
        >
          <template slot-scope="scope">
            <div>
              <span>{{
                scope.row.businessType == 1
                  ? $t("新增")
                  : scope.row.businessType == 5
                  ? $t("导出")
                  : scope.row.businessType == 2
                  ? $t("修改")
                  : scope.row.businessType == 3
                  ? $t("删除")
                  : scope.row.businessType == 4
                  ? $t("授权")
                  : scope.row.businessType == 6
                  ? $t("导入")
                  : scope.row.businessType == 7
                  ? $t("强退")
                  : scope.row.businessType == 8
                  ? $t("生成代码")
                  : $t("清空数据")
              }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="请求方式" align="center" prop="requestMethod" /> -->
        <el-table-column
          :label="$t('操作人员')"
          align="center"
          prop="operName"
          width="100"
          :show-overflow-tooltip="true"
          :sort-orders="['descending', 'ascending']"
        />
        <el-table-column
          :label="$t('操作地址')"
          align="center"
          prop="operIp"
          width="140"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="$t('操作地点')"
          align="center"
          prop="operLocation"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="$t('操作日期')"
          align="center"
          prop="operTime"
          :sort-orders="['descending', 'ascending']"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.operTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作状态')" align="center" prop="status">
          <template slot-scope="scope">
            <div
              :style="{
                color: scope.row.status == 0 ? '#73F6AF' : '#FF5562 ',
              }"
            >
              {{ scope.row.status == 0 ? $t("成功") : $t("失败") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('操作')"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="alarm-btns text-adnte">
              <div
                @click="handleView(scope.row, scope.index)"
                class="serch-btn"
              >
                {{ $t("详细") }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 操作日志详细 -->
    <el-dialog
      :title="$t('操作日志详细')"
      :visible.sync="open"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('操作模块') + ':'" label-width="136px"
              >{{ form.title }} / {{ typeFormat(form) }}</el-form-item
            >
            <el-form-item :label="$t('登录信息') + ':'" label-width="136px"
              >{{ form.operName }} / {{ form.operIp }} /
              {{ form.operLocation }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('请求地址') + ':'" label-width="136px">{{
              form.operUrl
            }}</el-form-item>
            <el-form-item :label="$t('请求方式') + ':'" label-width="126px">{{
              form.requestMethod
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('操作方法') + ':'" label-width="137px">{{
              form.method
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('请求参数') + ':'" label-width="153px">{{
              form.operParam
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('返回参数') + ':'" label-width="142px">{{
              form.jsonResult
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('操作状态') + '：'" label-width="140px">
              <div v-if="form.status === 0">{{ $t("正常") }}</div>
              <div v-else-if="form.status === 1">{{ $t("失败") }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('操作时间') + ':'" label-width="120px">{{
              parseTime(form.operTime)
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="$t('异常信息') + ':'"
              v-if="form.status === 1"
              >{{ form.errorMsg }}</el-form-item
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">{{ $t("关闭") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";

export default {
  name: "Operlog",
  dicts: ["sys_oper_type", "sys_common_status"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: "operTime", order: "descending" },
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        operName: undefined,
        businessType: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志 */
    getList() {
      this.loading = true;
      list(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 操作日志类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(
        this.dict.type.sys_oper_type,
        row.businessType
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.operId);
      this.multiple = !selection.length;
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
    /** 删除按钮操作 */
    // handleDelete(row) {
    //   const operIds = row.operId || this.ids;
    //   this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项？').then(function() {
    //     return delOperlog(operIds);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("删除成功");
    //   }).catch(() => {});
    // },
    /** 清空按钮操作 */
    // handleClean() {
    //   this.$modal
    //     .confirm("是否确认清空所有操作日志数据项？")
    //     .then(function () {
    //       return cleanOperlog();
    //     })
    //     .then(() => {
    //       this.getList();
    //       this.$modal.msgSuccess("清空成功");
    //     })
    //     .catch(() => {});
    // },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "monitor/operlog/export",
        {
          ...this.queryParams,
        },
        `operlog_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.froms {
  width: 82%;
  padding: 20px;
}
.alarm-btns {
  display: flex;
  margin-left: 64px;
  div:nth-child(2) {
    margin-left: 16px;
  }
  div {
    width: 56px;
    height: 36px;
    line-height: 36px;
  }
}
.border-bottom {
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
  // padding: 20px;
}
::v-deep .el-range-input {
  background: none !important;
  color: #fff;
}

.tooltips {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 16px;
  background: #0f1a23;
  margin: 5px 0 5px 0;
  span {
    display: block;
    font-size: 14px;
    color: #ffad30;
  }
}
.padelent {
  margin-left: -136px;
}
.ptneig {
  padding: 20px;
}
.text-adnte {
  display: flex;
  align-items: center;
  justify-content: center;
}
.alarm-btns[data-v-de201af8] {
  margin: 0;
}
</style>
